<%@page import="edu.hcmus.sow.utils.StringUtil"%>
<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="edu.hcmus.sow.service.DocumentService"%>
<%@page import="javax.swing.text.DateFormatter"%>
<%@page import="java.text.DateFormat"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@page import="java.util.Calendar"%>
<%@page import="org.ocpsoft.pretty.time.PrettyTime"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div style="line-height: 24px;" class="div_h3">
			    <h3 style="letter-spacing: 0px; font-size: 13px;">Task details</h3>
			</div>
			<div class="box_task">
			 	<c:if test="${task.adjustedEstimate == 100}">
			    <div style="width: 100%; "  id="markCompletedInfo">
					<ul  class="feedbackPanel">
						<li class="feedbackPanelINFO">
							<span class="feedbackPanelINFO">This task marked as completed</span>
						</li>
					</ul>
			   </div>
			</c:if>
			<div style="width: 100%; display: none; "  id="markCompletedChange">
				<ul  class="feedbackPanel">
					<li class="feedbackPanelINFO">
						<span class="feedbackPanelINFO">This task marked as completed</span>
					</li>
				</ul>
			</div>
			         	<div class="line" style="height: 25px; padding-top: 10px;">
			    	<span  style="font-size:14px; font-weight:bold; text-align:left; margin-left:9px; ">Task name : ${task.title } </span>
			    	<input id = "taskID" type="hidden" value="${task.id }"/>
			    	
			    	<input id = "userID" type="hidden" value="${task.userByCreatedBy.id }"/>
			        <span style="color:#999999; font-weight:bold; float:right; margin-right:10px;">Created by: <span>${task.userByCreatedBy.username}</span></span>
			    </div>
			    <div class="line" style="border-bottom:none;">
			    	<div class="T1">
			        	<img src="${pageContext.request.contextPath}/images/tasks-icon.png" width="73" height="54" />
			        </div>
			        <div class="T2">
			        	<div class="line">
			            	<div class="creatdate">
			                	<span style="color:#666666; font-size:11px;">Created Date</span><br />
			                	<c:set var="createdDate" value="${task.createdDate.getTime()}"></c:set>
			                	<c:set var="esHours" value="${task.originalEstimate}"></c:set>
			                	
			                	<c:set var="duDate" value="${task.dueDate}"></c:set>
			                	<input type="hidden" id="dueDate" value="<%= StringUtil.convertCalendarToDate((Calendar)(pageContext.getAttribute("duDate"))) %>">
			                	<input type="hidden" id="estimatedHours" value="<%=	StringUtil.convertTimeSpentToString((Integer)(pageContext.getAttribute("esHours"))) %>">
			                	<span style="font-size:16px;"><%=new PrettyTime().format((Date) pageContext.getAttribute("createdDate"))%></span>
			                    
			                </div>
			                <div class="creatdate">
			                	<span style="color:#666666; font-size:11px;">Due date</span><br />
			                	<span style="font-size:16px; color: red;"><%= StringUtil.convertCalendarToDate((Calendar)(pageContext.getAttribute("duDate"))) %></span>
			                	<span style="font-size:16px;"></span>
			                </div>
			                <div class="creatdate" style="border-right:none;">
			                	<span style="color:#666666; font-size:11px;">Estimated Hours</span><br />
			                	<span style="font-size:16px; color: red;">
			                		<%=	StringUtil.convertTimeSpentToString((Integer)(pageContext.getAttribute("esHours"))) %>
			                	</span>
			                </div>
			            </div>
			            <div style="margin-top: 5px; margin-bottom: 15px;" class="line">
			            	<span style=" font-size:14px; margin-left:5px;">Assigned to:</span>
			                <span style="font-size:18px; font-weight:bold; margin-left:3px;">${task.userByAssignedTo.username}</span>
			            </div>
			            <div class="line" style="border-bottom:none; margin-bottom:10px;">
			            	<div style="margin-top: 10px; margin-bottom: 3px;" class='default'>
			                	<div style="margin-bottom: 4px;">
			                		<span style="font-weight: bold; margin-bottom: 3px;">Progress: <span id="percent" style="margin-right:2px; "></span>% <span style="display: none;" id="savingContainer"><img style="padding-top: 3px;"  src="${pageContext.request.contextPath}/images/throbber.gif">&nbsp;<span style="padding-left:5px; float: none;">saving..</span></span></span>
			                    </div>
								<div id="slider" style="width:99%;"></div>
									<input id="adjustedEstimate" type="hidden" value="${task.adjustedEstimate}">
			                </div>
			            </div>
			        </div>
			    </div>
			</div>
			<div class="des">
				<div style="margin-left:10px; font-weight:bold; margin-top:15px;">Description</div>
			   	<div class="mota" style="margin-left: 40px;">${task.description }</div>
			</div>
			<div class="box_task" style="margin-top:15px;">
			 	<div class="line">
			    	<span style="text-align:left; margin-left:5px; font-size:16px; font-weight:bold;">Attachment files</span>
			    </div>
			    <div id="attachments">
			    	<%@include  file="c_taskAttachments.jsp" %>
			    </div>
			    <div class="line" style="padding-top: 10px;">
			    	<span style="text-align:left; margin-left:5px; font-size:16px; font-weight:bold;">Time tracking</span>
			 	</div>
			 	<div id="feedbacka" style="display: none;">
					<ul class="feedbackPanel">
						<li class="feedbackPanelERROR">
							<span class="feedbackPanelERROR">Amount is required</span>
						</li>
					</ul>
				</div>
			   <table style="margin-top:7px;margin-bottom:7px;">
			      <tr style="border-bottom:1px solid #CCCCCC;">
			        <td width="11%" class="td_time">When</td>
			        <td width="19%" class="td_time">Time Spent (Hour : Min)</td>
			        <td width="24%" class="td_time"><span style="margin-left: 20px;">Person</span></td>
			        <td width="32%" class="td_time"><span style="margin-left: 26px; ">Note</span></td>
			        <td width="14%" class="td_time">&nbsp;</td>
			      </tr>
			      <tr style="height: 40px;">
			     	<td  style="border-bottom:1px solid #E9E9E9" class="td_data">
			        	<input  id="loggedDate" type="text" style="height: 20px;"  />
			        </td>
			        <td style="border-bottom:1px solid #E9E9E9" class="td_data">
			        	<input  id="timeSpent" type="text" style="width:50px;  text-align: center; height: 20px;" />
			        </td>
			        <td style="border-bottom:1px solid #E9E9E9" class="td_data">
			        	<select id="person" style="width:150px; height: 20px; font-size: 13px; vertical-align: middle;">
			            	<option value="${task.userByCreatedBy.id }">Me</option>
			                <c:forEach items="${userlists }" var="user">
			                	<option value="${user.id }">${user.username }</option>
			                </c:forEach>
			            </select>
			        </td>
			        <td style="border-bottom:1px solid #E9E9E9" class="td_data">
			        	<input id="timeSpentNote" type="text" style="width:90%; height: 20px;" />
			        </td>
			        <td  style="border-bottom:1px solid #E9E9E9"class="td_data">
						<a  class="gcSubmit small f_left" style="white-space: nowrap;" id="submit1a8" onclick="addTimeSpent();">
							Add time spent
							<span class="left"></span>
							<span class="right"></span>
						</a>
						<span style="display: none;" id="spinnerContainer"><img src="${pageContext.request.contextPath}/images/throbber.gif"></span>
			        </td>
			      </tr>
			    </table>
				<div id="workLogLists">
					<%@include  file="c_workLogLists.jsp" %>
				</div>
			    <div class="line" style="margin-top:10px;">
			    	<span style="text-align:left; margin-left:5px; font-size:16px; font-weight:bold;">Comments</span>
			            </div>
				<div id="taskCommentsList">
					<%@include file="c_taskCommentList.jsp" %>
				</div> 
			         <div class="line" style="margin-top:10px;">
			    	<span style="text-align:left; margin-left:5px; font-size:16px; font-weight:bold;">Put your comment here</span>
			    </div>
			    <div class="line" style="border-bottom:none; margin-bottom:50px;">
			         <div class="T1" style="width:10%;">
			            <a href="hoso.html"><img src="${pageContext.request.contextPath}/images/anne.png" width="30" height="30"  style="border:none;"/></a>
			         </div>
			         <div class="T2" style="width:90%;">
			         
			         <div id="feedbackAddComment" style=" width:91%; display:none; line-height: 15px; ">
						<ul class="feedbackPanel">
							<li class="feedbackPanelERROR">
								<span class="feedbackPanelERROR">Comment is required</span>
							</li>
						</ul>
					</div>
			        <div class="line" style="border-bottom:none">
			        	<textarea id="taskCommentContent" style="width:90%; height:200px;"></textarea>
			        </div>
			        <div class="addArea" style="width: 90%; text-align: left;">
						<a class="gcSubmit" id="commentSubmitAjax" onclick="addTaskComment();">	Submit	
							<span class="left"></span>
							<span class="right"></span>
							<img id="imgAddComment" style="display: none;"  src="${pageContext.request.contextPath}/images/loading.gif">
						</a>
						<span style="margin-top:10px;top:-3px;">Notify by email</span>
						<span style="padding-top:7px;">
							<script type="text/javascript">
							 $(document).ready(function() {
							     $("#s89").dropdownchecklist( {firstItemChecksAll: true, emptyText: "Select...", width: 150} );
							 });
							</script>	  		
							   <select id="s89" class="s8" multiple="multiple" style="font-size: 7px; ">
								<option value="0">All</option>
							    <c:forEach items="${userlists }" var="user">
							    	<option value="${user.id }">${user.username }</option>
							    </c:forEach>
							</select>
					 	</span>	
					</div>
			         </div>
			     </div>
			 </div>